<template>
  <div>
    <div v-if="bool" v-show="bool1">
      <!-- 商品订单头部 -->
      <div class="shangpin">
        <van-icon name="arrow-left" @click="$router.push('/home')" />
        <span>商品订单</span>
      </div>
      <!-- 搜索框 -->
      <van-search
        v-model="value"
        show-action
        shape="round"
        placeholder="关键字查询"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
      <!-- tab栏 -->
      <van-tabs
        v-model="active"
        color="#ffcc33"
        title-active-color="#003399"
        @change="onSearch"
      >
        <!-- 显示全部的内容 -->
        <van-tab title="全部" name="all">
          <div class="describe" v-for="(item, index) in records" :key="index">
            <div class="box1">
              <p class="p1">商品描述</p>
              <van-icon name="arrow" />
            </div>

            <div class="xaing">
              <dl>
                <dt>
                  <img :src="img01" alt="" />
                </dt>
                <dd>
                  <p class="p2">{{ item.title }}</p>
                  <p>
                    <span>下单时间</span>
                    <i>{{ item.orderTime }}</i>
                  </p>
                  <p>
                    <span>下单人</span>
                    <i>{{ item.orderUserName }}</i>
                  </p>
                </dd>
              </dl>
            </div>
            <van-button plain hairline round type="info" v-if="item.status==10" @click="Dialog(item)"
              >收货</van-button
            >
            <van-button plain hairline round type="info" v-else-if="item.status==0" @click="fath(item)"
                >发货</van-button
              >
              <van-button plain hairline round type="info" v-else-if="item.status==20" @click="Dialog(item)"
              >收货</van-button
            >
          </div>
        </van-tab>
        <!-- 待发货 -->
        <van-tab title="待发货" name="wait">
          <div>
            <div class="describe" v-for="(item, index) in records" :key="index">
              <div class="box1">
                <p class="p1">商品描述</p>
                <van-icon name="arrow" />
              </div>

              <div class="xaing">
                <dl>
                  <dt>
                    <img :src="img01" alt="" />
                  </dt>
                  <dd>
                    <p class="p2">{{ item.cusName }}</p>
                    <p>
                      <span>下单时间</span>
                      <i>{{ item.orderTime }}</i>
                    </p>
                    <p>
                      <span>下单人</span>
                      <i>{{ item.orderUserName }}</i>
                    </p>
                  </dd>
                </dl>
              </div>
              <van-button plain hairline round type="info" @click="fath(item)"
                >发货</van-button
              >
            </div>
          </div>
        </van-tab>
        <!-- 待收货· -->
        <van-tab title="待收货" name="waitout">
          <div class="describe" v-for="(item, index) in records" :key="index">
            <div class="box1">
              <p class="p1">商品描述</p>
              <van-icon name="arrow" />
            </div>

            <div class="xaing">
              <dl>
                <dt>
                  <img :src="img01" alt="" />
                </dt>
                <dd>
                  <p class="p2">{{item.address}}</p>
                  <p>
                    <span>下单时间</span>
                    <i>{{item.orderTime}}</i>
                  </p>
                  <p>
                    <span>下单人</span>
                    <i>{{item.orderUserName}}</i>
                  </p>
                </dd>
              </dl>
            </div>
            <van-button plain hairline round type="info" @click="Dialog(item)"
              >收货</van-button
            >
          </div>
        </van-tab>
        <!-- 待评价 -->
        <van-tab title="待评价" name="aswe">
          <div class="describe">
            <div class="box1">
              <p class="p1">商品描述</p>
              <van-icon name="arrow" />
            </div>

            <div class="xaing">
              <dl>
                <dt>
                  <img :src="img01" alt="" />
                </dt>
                <dd>
                  <p class="p2">小狼公司物流单</p>
                  <p>
                    <span>下单时间</span>
                    <i>2018-12-08 20:21</i>
                  </p>
                  <p>
                    <span>下单人</span>
                    <i>张三</i>
                  </p>
                </dd>
              </dl>
            </div>
            <van-button color="#ffcd33" round type="primary" @click="jumpExid"
              >评价</van-button
            >
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <Productpingjia v-else  @chan="chan" :item="item"/>
    <Productexid v-show="!bool1" @chan2="chan2"/>
  </div>
</template>

<script>
import {
  GetAllList,
  GetfoundList,
  GetwaitList,
  GetaswrList,
  Nowwaitout
} from "../request/api";
import Productexid from "../components/Productexid";
import Productpingjia from "../components/Productpingjia";
export default {
  components: {
    Productexid,
    Productpingjia
  },
  data() {
    return {
      value: "",
      active: "all",
      img01: require("../assets/切图/头像男 拷贝 4.png"),
      show: "",
      msg: "",
      records: [],
      bool: true,
      item : [],
      bool1 : true
    };
  },
  methods: {
    fath(item){
      this.bool = false
      this.item = item
    },
    chan(){
      this.bool = true
    },
    chan2(){
      this.bool1 = true
    },
    onSearch() {
      if (this.active == "all") {
        this.AllList(this.value);
      } else if (this.active == "wait") {
        this.foundList(this.value);
      } else if (this.active == "waitout") {
        this.waitList(this.value);
      }
    },
    Dialog(item) {
      this.$dialog
        .confirm({
          title: "是否确认收货",
          confirmButtonText: "确认收货",
          confirmButtonColor: "skyblue"
        })
        .then(() => {
            Nowwaitout({
              serialNo : this.item.serialNo
            }).then(res=>{
              console.log(res);
            })
        })
        .catch(() => {});
    },
    jumpExid() {
      this.bool1=false
    },
    //全部订单
    AllList(keyword = "", size = 10, current = 1) {
      GetAllList({ keyword, size, current }).then(res => {
        console.log(res);
        this.records = res.data.records;
      });
    },
    //待收货
    foundList(keyword = "", size = 10, current = 1) {
      GetfoundList({
        keyword,
        size,
        current
      }).then(res => {
        this.records = res.data.records;
      });
    },
    //待收货
    waitList(keyword = "", size = 10, current = 1) {
      GetwaitList({
        keyword,
        size,
        current
      }).then(res => {
        this.records = res.data.records;
      });
    },
    // 评价
    // aswrList(){
    //   GetaswrList({
    //     keyword,
    //     size,
    //     current
    //   })
    // }
  },
  created() {
    this.AllList();
  }
};
</script>
 
<style lang = "less" scoped>
.box1 {
  display: flex;
  justify-content: space-between;
}
.shangpin {
  background-color: #003399;
  color: #fff;
  padding: 0.166667rem 0.066667rem;
  text-align: center;
  span {
    vertical-align: 0.03rem;
  }
  .van-icon {
    float: left;
    font-size: 0.186667rem;
  }
}
.van-tabs {
  border-top: 1px solid #eee;
}
.van-tab {
  border-right: 1px solid #eee;
}
.describe {
  background-color: #fff;
  margin-top: 0.066667rem;
  box-sizing: border-box;
  .p1 {
    line-height: 0.32rem;
    padding: 0.066667rem;
    margin: 0;
  }
  .van-icon {
    margin: 0.15667rem;
  }
}
.xaing {
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
  dl {
    display: flex;
    dt {
      width: 20%;
      img {
        width: 100%;
      }
    }
    dd {
      margin: 0.066667rem;
      p {
        margin: 0.036667rem;
        i {
          font-weight: 600;
          margin-left: 0.126667rem;
        }
      }
      .p2 {
        font-weight: 600;
      }
    }
  }
}
.van-button {
  width: 1.066667rem;
  margin: 0.106667rem;
  margin-left: 2.8rem;
}
</style>